<template>
    <div class="admin-content">
        <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            size="small"
            label-width="78px"
        >
            <el-form-item class="flex-avg" label="姓名" prop="name">
                <el-input v-model="ruleForm.name" class="input-width" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item class="flex-avg" label="性别" prop="gender">
               <el-select
                v-model="ruleForm.gender"
                placeholder="请选择"
                class="inputLab"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="admin-input" label="联系电话" prop="mobile">
                <el-input v-model="ruleForm.mobile" class="input-width" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item class="admin-input" label="管理诊所" prop="clinicName">
                <el-input v-model="ruleForm.clinicName" class="input-width" placeholder="请输入诊所名称"></el-input>
                <el-checkbox v-model="ruleForm.checked" label="1">全部诊所</el-checkbox>
            </el-form-item>
            <el-form-item>
                <span class="admin-span">北京诊所</span>
                <span class="admin-span">天津诊所</span>
                <span class="admin-span">上海诊所</span>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
import {adminAdd} from '@/api/oper';
export default {
    data(){
        return {
             ruleForm: {
                name: '',
                sex: '',
                mobile: '',
                clinicName:'',
                checked:false
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                mobile: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                clinicName: [
                    { required: true, message: '请输入诊所名称', trigger: 'change' }
                ]
            },
            options: [{
                    value: 'M',
                    label: '男'
                }, {
                    value: 'F',
                    label: '女'
                }
            ],
        }
    },
    computed: {
        user() {
        return this.$store.getters.user;
        }
    },
    methods:{
        addAdmin(){
            this.ruleForm.createUser = this.user.id;
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                data(this.ruleForm).then((e) => {
                    // callback();
                    console.log(e)
                });
                } else {
                console.log('err');
                }
            });   
        }
    }

}
</script>

<style lang="scss">
    .admin-content{
        padding: 30px 60px;
        padding-bottom: 0px;
        .input-width{
            width: 240px;
        }
        .el-select{
            width: 240px;
        }
        .admin-input{
            .input-width{
                width: 432px;
            }
        }
        .admin-span{
            display: inline-block;
            width: 100px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background: #508FCC;
            border-radius: 14px;
            color: #fff;
            font-size: 14px;
        }
    }
</style>